body{
background-color:teal;
width:1024px;
height:640px;
}

h1{
color:orange;
text-align:center;
}

p{
font-family:"Times New Roman";
font-size:20px;
}

table{

	margin:1%;
	border-collapse:collapse;
}

th{
	border:0;
}

td{
	width:25px;
	height:25px;
	border:1px solid black;
}

 #container{
	text-align:center;
	height:100%;
	width:100%;
}

	#top{
		background-color:#66BB44;
		width:100%;
		height:20%;
		margin:2px;
	}

	#mid{
		width:100%;
		height:80%;
		margin:2px;
	}

		#game_field{
			float:left;
			width:60%;
			height:100%;
			background-color:#33FF00;
		}
		
			#battle_field{
				width:100%;
				height:72%;
				background-color:#3366FF;
			}

				#player_field{
					background-color:#33AACC;
					width:48%;
					float:left;
					margin:1%
				}

				#opponent_field{
					background-color:#CC88FF;
					width:48%;
					float:right;
					margin:1%
				}
				
			#ship_field{
				margin-top:7px;
				width:100%;
				height:24%;
				background-color:#00AA99;
			}
			
				#player_ships{
					float:left;
					width:48%;
					height:90%;
					margin:5px;
					background-color:#008833;
				}
				
				#opponent_ships{
					float:right; 
					width:48%;
					height:90%;
					margin:5px;
					background-color:#994455;
				}

		#display{
			float:right;
			width:38%;
			height:100%;
			background-color:black;
			margin-left:1%;
		}

			#scoreboard{
				background-color:cyan;
				height:40%;
				width:96%;
				padding:1%;
				margin:1%;
			}
            
			#score{
				text-align:left;  
				margin:5px auto 5px;  
				padding:10px;  
				background:#fff;  
				height:40%;  
				width:92%;  
				border:1px solid #ACD8F0;  
				overflow:auto;
			}

			#chat{
				text-align:left;  
				margin:5px auto 5px;  
				padding:2px 10px 10px 2px;  
				background:#fff;  
				height:40%;  
				width:92%;  
				border:1px solid #ACD8F0;  
				overflow:auto;
			}
			
	#bottom{
		background-color:magenta;
		width:100%;
		height:20%;
		margin:2px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	